import React from "react";
import { Modal, Form, Input } from "antd";
import { modalPropsType } from "@/constants/types";

const {Item} = Form;
const labelCol = {span: 4}

const CabinetOrderManage = ({visible, loading, onCancel, onSubmit, title, currentRow}:modalPropsType) => {
  const [form] = Form.useForm();
  const isOut = !!currentRow;
  const isIn = !currentRow;

  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit({
      remark: res?.remark,
      orderCodes: isOut ? undefined : res?.orderCodes?.replace(/，/g, ',').replace(/\n/g, ',').split(',').filter((v: string) => v.trim())?.map((v: string) => v?.trim()),
      orderId: isOut ? currentRow?.id : undefined
    })
  }
  return (
    <Modal
      title={title}
      open={visible}
      maskClosable={false}
      confirmLoading={loading}
      onCancel={onCancel}
      onOk={handleSubmit}
      width="550px"
    >
      <Form form={form} className="modal-form-padding" labelCol={labelCol}>
        {
          isIn && (
            <Item label="订单号" name="orderCodes" rules={[{required: true, message: '请输入订单号'}]}>
              <Input.TextArea rows={3} placeholder="请输入订单号，以英文逗号、中文逗号或回车符分隔" />
            </Item>
          )
        }
        <Item label="备注" name="remark" rules={isOut ? [{required: true, message: '请输入备注'}] : undefined}>
          <Input.TextArea rows={3} placeholder="请输入备注" />
        </Item>
      </Form>
    </Modal>
  );
}
export default CabinetOrderManage;